<template>
	<div>
		<show-view-path :parent-views="parentViews" :screenConfig="screenConfig" :chartConfig="chartConfig"  @selectView="selectView"></show-view-path>
		<div style="height: 100%" :ref="config.key"></div>
	</div>
</template>

<script>
/*
	横向柱状图
 */
import ChartPublic from './chart-public.js';
import ChartStyle from './chart-style.js';
import StaticDataFunc from "./static-data-func";

export default {
	name: "horizontalBar-view",
	mixins:[ChartPublic,ChartStyle,StaticDataFunc],
	data() {
		return {
			chartType:"bar"
		}
	},
	methods: {
		setOption(){
			//图例组件
			let legend = [];
			//直角坐标系 grid 中的 x 轴
			let xAxis = {};
			//x轴维度配置
			let xAxisArr = [];
			//yAxis直角坐标系 grid 中的 y 轴
			let yAxis="";
			//双Y轴
			if(this.config.styles.yAxisShow2){
				yAxis=[];
				//第一Y轴
				let yAxis1=  {type: 'value',axisLine:{show:false},position:this.config.styles.yAxisConfig.position || "bottom"};
				if(this.config.styles){
					yAxis1['show'] = this.config.styles.yAxisShow
				}
				//Y轴在grid区域中的分隔线
				this.splitLineStyle(yAxis1,this.config.styles.yGrid)
				//修改y轴颜色
				this.chartYlineStyle(yAxis1,this.config.styles.yAxisConfig,this.config.dataSources.measures2);
				yAxis.push(yAxis1);

				//第二Y轴
				let yAxis2=  {type: 'value',axisLine:{show:false},position:this.config.styles.yAxisConfig.position || "bottom"};
				//修改y轴样式风格
				//判断是否隐藏Y轴
				if(this.config.styles){
					yAxis2['show'] = this.config.styles.yAxisShow2
				}
				//修改y轴颜色
				//Y轴在grid区域中的分隔线
				this.splitLineStyle(yAxis2,this.config.styles.yGrid)
				this.chartYlineStyle(yAxis2,this.config.styles.yAxisConfig2);
				yAxis.push(yAxis2);
			}else {
				yAxis=  {type: 'value',axisLine:{show:false},position:this.config.styles.yAxisConfig.position || "bottom"};
				//修改y轴样式风格
				//判断是否隐藏Y轴
				if(this.config.styles){
					yAxis['show'] = this.config.styles.yAxisShow
				}
				//Y轴在grid区域中的分隔线
				this.splitLineStyle(yAxis,this.config.styles.yGrid)
				//修改y轴颜色
				this.chartYlineStyle(yAxis,this.config.styles.yAxisConfig)
			}
			/**
			 *系列列表
             [{name: 名称,
             type: 类型,
             data: 数据 []
             }]
			 */
			let series = [];

			//静态数据模式
			if(this.config.dataSources.source=="static"){
				if(this.config.dataSources.staticData){
					//静态数据
					let staticData=JSON.parse(this.config.dataSources.staticData);
					for (let i = 0; i < staticData.series.length; i++) {
						staticData.series[i].type=this.chartType;
						if(staticData.series[i].name){
							legend.push(staticData.series[i].name);
						}
					}
					xAxis= {
						type: 'category',
						data: staticData.categories,
						show:this.config.styles.xAxisShow,
						axisLine: {
							show: true,
							lineStyle: {
								color:this.config.advancedConf.xAxisColor?this.config.advancedConf.xAxisColor:"#333"
							}
						},
					}
					//修改x轴颜色
					this.chartXlineStyle(xAxis);
                    series = this.initStaticSeries(staticData.series);
				}
			}else {
				//获取维度
				xAxis=this.getDimensions(xAxisArr);
				//判断是否隐藏x轴
				if(this.config.styles){
					xAxis.show = this.config.styles.xAxisShow
				}
				//修改x轴颜色
				this.chartXlineStyle(xAxis)
				//未配置颜色图例
				if(this.config.dataSources.colorLegends.length==0){
					//获取度量
					this.calMeasures(this.config.dataSources.measures,legend,series,0);
					//双Y轴
					if(this.config.styles.yAxisShow2){
						this.calMeasures(this.config.dataSources.measures2,legend,series,1);
					}
				}else {
					//图例组件配置
					let legendArr = [];
					//第一Y轴
					let legend1 = [];
					let legendArr1 = [];
					this.calMeasuresAndColorLegend(this.config.dataSources.measures,legendArr1,legend1,series,xAxisArr,0);
					legend.push(...legend1);
					legendArr.push(...legendArr1);
					//双Y轴
					if(this.config.styles.yAxisShow2){
						let legend2 = [];
						let legendArr2 = [];
						this.calMeasuresAndColorLegend(this.config.dataSources.measures2,legendArr2,legend2,series,xAxisArr,1);
						legend.push(...legend2);
						legendArr.push(...legendArr2);
					}
				}
				//注意 X与Y轴 调转方向
				let gridObj = this.chartGrid();
				gridObj['containLabel'] = true
			}
            let dataZoom = [];
            if(this.config.styles.dataZoomShow && xAxis.data.length>this.config.styles.dataZoom.numeral){
                //X轴是否滚动
                dataZoom.push({
                    type: 'slider',
                    show: true,
                    xAxisIndex: [0],
                    start: this.config.styles.dataZoom.start, // 初始范围的起始百分比
                    end: this.config.styles.dataZoom.end // 初始范围的结束百分比
                });
                if(this.config.styles.insideShow){
                    dataZoom.push({
                        type: 'inside',
                        start:this.config.styles.inside.start,
                        end: this.config.styles.inside.end
                    })
                }
            }
			this.option={
				tooltip:this.chartTooltip(),//提示框的样式修改
				grid:this.chartGrid(),//grid离容器的边距设置
				toolbox:this.chartToolbox(),//工具栏目配置
				color:this.getColors(),
				legend: this.chartLegend(legend),//图例
				xAxis: yAxis,
				yAxis: xAxis,
				series: series,
                dataZoom:dataZoom
			};
		},
		calMeasures(measures,legend,series,yAxisIndex){
			for (let i = 0; i < measures.length; i++) {
				let array=[];
				let measure = measures[i];
				let fieldName=measure.tableName?measure.tableName+'_'+measure.fieldName:measure.fieldName;
				legend.push(measure.fieldLabel);
				for (let j = 0; j < this.data.length; j++) {
					let value= this.data[j][fieldName];
					if(value){
						array.push(value);
					}else {
						array.push(0);
					}
				}
				let obj={
					name: measure.fieldLabel,
					type:this.chartType,
					data:array,
					label:{}
				}
				if(yAxisIndex){
					obj.xAxisIndex=yAxisIndex;
				}
				//柱形宽度
				if(this.config.styles.barConfig && this.config.styles.barConfig.barWidth ){
					if(this.config.styles.barConfig.widthSuffix =='px'){
						obj.barWidth=this.config.styles.barConfig.barWidth;
					}else {
						obj.barWidth=this.config.styles.barConfig.barWidth + '%';
					}
				}
				//柱状图圆角
				if(this.config.styles.barConfig && this.config.styles.barConfig.radius){
					let numberList = this.filletedCorner(this.config.styles.barConfig.radius)
					let  itemStyle = {
						normal:{
							barBorderRadius :numberList
						}
					}
                    obj['itemStyle']=itemStyle;
				}
				//是否展示顶部信息
				if(this.config.styles.barConfig && this.config.styles.barConfig.showData){
                    obj.label={
                        show: this.config.styles.barConfig.showData,
                        position: 'right',
                        color: this.config.styles.barConfig.fontColor
                    };
				}
				//获取预警线数据和样式
				let markLine = {
					type: 'bar',
					silent: true, //基线显示 隐藏
					symbol: 'none', // 不显示箭头和圆点
					data:this.markLine(array),//获取属性样式
				}
				obj['markLine'] = markLine
				series.push(obj);
			}
		},
		calMeasuresAndColorLegend(measures,legendArr,legend,series,xAxisArr,yAxisIndex){
			//根据颜色图例与度量获取图例组件
			for (let i = 0; i < this.config.dataSources.colorLegends.length; i++) {
				let colorLegend = this.config.dataSources.colorLegends[i];
				let fieldName=colorLegend.tableName?colorLegend.tableName+'_'+colorLegend.fieldName:colorLegend.fieldName
				for (let j = 0; j < measures.length; j++) {
					let measure = measures[j];
					for (let k = 0; k < this.data.length; k++) {
						let colorValue =this.getColorValue(this.data[k],colorLegend,measure,true);
						let number = legend.indexOf(colorValue);
						if(number==-1){
							legend.push(colorValue);
							legendArr.push({
								key:measure.tableName?measure.tableName+"_"+measure.fieldName:measure.fieldName,
								fieldName:fieldName,
								value:this.data[k][fieldName]
							})
						}
					}
				}
			}
			for (let i = 0; i < legendArr.length; i++) {
				let legendObj=legendArr[i];
				let array=[];
				for (let j = 0; j < xAxisArr.length; j++) {
					let val=0;
					for (let k = 0; k < this.data.length; k++) {
						let xAxisObj=xAxisArr[j];
						if(this.config.dataSources.dimensions.length>1){
							let xAxisKeys = xAxisObj.key.split("-");
							let xAxisVal="";
							for (let l = 0; l < xAxisKeys.length; l++) {
								if(l!=0){
									xAxisVal+="-";
								}
								let xVal = this.data[k][xAxisKeys[l]];
								//维度配置了字段渲染
								if(typeof(xVal)!='string'){
									xVal=xVal.oldValue;
								}
								xAxisVal+=xVal;
							}
							if(xAxisVal==xAxisObj.value && this.data[k][legendObj.fieldName]==legendObj.value ){
								val=this.data[k][legendObj.key];
								break;
							}
						}else {
							let xVal = this.data[k][xAxisObj.key];
							//维度配置了字段渲染
							if(typeof(xVal)!='string'){
								xVal=xVal.oldValue;
							}
							if(xVal==xAxisObj.value && this.data[k][legendObj.fieldName]==legendObj.value ){
								val=this.data[k][legendObj.key];
								break;
							}
						}

					}
					array.push(val)
				}

				let obj={
					name: legend[i],
					type:this.chartType,
					data:array,
				}
				//柱形宽度
				if(this.config.styles.barConfig && this.config.styles.barConfig.barWidth ){
					if(this.config.styles.barConfig.widthSuffix =='px'){
						obj.barWidth=this.config.styles.barConfig.barWidth;
					}else {
						obj.barWidth=this.config.styles.barConfig.barWidth + '%';
					}
				}
				//柱状图圆角
				if(this.config.styles.barConfig && this.config.styles.barConfig.radius){
					let numberList = this.filletedCorner(this.config.styles.barConfig.radius)
					let  itemStyle = {
						normal:{
							barBorderRadius :numberList
						}
					}
                    obj['itemStyle']=itemStyle;
				}
				//是否展示顶部信息
				if(this.config.styles.barConfig && this.config.styles.barConfig.showData){
                    obj.label={
                        show: this.config.styles.barConfig.showData,
                        position: 'right',
                        color: this.config.styles.barConfig.fontColor
                    };
				}
				if(yAxisIndex){
					obj.xAxisIndex=yAxisIndex;
				}
				//获取预警线数据和样式
				let markLine = {
					type: 'bar',
					silent: true, //基线显示 隐藏
					symbol: 'none', // 不显示箭头和圆点
					data:this.markLine(array),//获取属性样式
				}

				obj['markLine'] = markLine
				series.push(obj);
			}
		}
	},
	watch: {}
}
</script>

<style scoped>
</style>
